<template>
	<view >
		<view class="listbox" v-for="(item,index) in list" :key="index" @click="todetail(item,index)">
			<view class="timebox">{{item.create_time|dateFormat}}</view>
			<view class="writebox" v-if="item.info">
				<view class="tipbox" v-if="item.info">
					<!-- 1系统消息2反馈信息 -->
					<view v-if="item.type==1">{{item.info.title}}</view>
					<view v-else>{{item.info.nickname}}</view>
					<image src="../../static/XX.png" @click.stop="delmsg(item)"></image>
				</view>
				<view class="infobox" v-if="item.type==2">
					<view class="titlebox">
						{{item.info.content}}
					</view>
					<view class="imgbox">
						<view class="imglist" v-for="(imgitem,imgindex) in item.info.img.split('|')" :key="imgindex">
							<image :src="imgitem"  @tap.stop="previewImage(imgitem,index)"></image>
						</view>
					</view>
				</view>
				<view class="infobox" style="display: flex; align-items: center;" v-else>
					<view class="magimg">
						<image :src="item.info.img"></image>
					</view>
					<view class="magtit">{{item.info.desc}}</view>
				</view>
				<view v-if="item.info.reply_content" style="margin: 20rpx 0 10rpx 0;">处理结果—{{item.info.reply_content}}</view>
			</view>
		</view>
		<view class="kongbox" v-if="list.length==0">
			<image src="../../static/kong.png"></image>
			<view>暂无</view>
		</view>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				imglist:[],
				imgs:[],
			}
		},
		filters:{
		            //过滤器 用于格式化时间
		            dateFormat: function(value) {           
		                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		                var year = date.getFullYear();
		                var month = ("0" + (date.getMonth() + 1)).slice(-2);
		                var sdate = ("0" + date.getDate()).slice(-2);
		                var hour = ("0" + date.getHours()).slice(-2);
		                var minute = ("0" + date.getMinutes()).slice(-2);
		                var second = ("0" + date.getSeconds()).slice(-2);
		                // 拼接
		                var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
		                // 返回
		                return result;
		            },
		        },
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist(){
				uni.showLoading({})
				this.$http({
					url:'api/Answer/user_msg',
					data:{
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					uni.hideLoading()
					this.list = res.data
					console.log(this.list,'list')
				})
			},
			//删除消息nickname
			delmsg(item){
				this.$http({
					url:'api/Answer/del_user_msg',
					data:{
						token:uni.getStorageSync('token'),
						id:item.id
					}
				}).then(res=>{
					this.getlist()
				})
			},
			//图片预览
			previewImage(imgitem, index) {
				this.imglist = this.list[index].info.img.split('|')
				this.imgs = []
				for (let i = 0; i < this.imglist.length; i++) {
					this.imgs.push(this.imglist[i])
				             }
				uni.previewImage({
					current: imgitem,
					urls: this.imgs,
				})
			},
			todetail(item,index){
				uni.navigateTo({
					url:'/pages/msginfo/msginfo?id='+item.id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F4F9FD;
	}
</style>
<style lang="scss" scoped>
	.listbox{
		.timebox{
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #555555;
		}
		.writebox{
			width: 652rpx;
			padding: 0 25rpx 20rpx 25rpx;
			// background: #FFFFFF;
			background: linear-gradient(90deg, #CAE4FF, #FFFFFF);
			border-radius: 10rpx;
			margin: 0 auto;
			.tipbox{
				height:85rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			.infobox{
				background: #F8F8F8;
				border-radius: 5rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				.titlebox{
					padding: 26rpx 23rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}
				.imgbox{
					display: flex;
					flex-wrap: wrap;
					// padding: 0 23rpx;
					// width: 100%;
					.imglist{
						width: 33.3%;
						text-align: center;
						height: 200rpx;
						line-height: 200rpx;
						image{
							width: 184rpx;
							height: 184rpx;
							margin: 0 auto;
						}
					}
					
				}
				.magimg{
					width: 27%;
					height: 152rpx;
					border-radius: 5rpx;
					image{
						width: 152rpx;
						height: 152rpx;
						border-radius: 5rpx;
					}
				}
				.magtit{
					width: 70%;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.kongbox{
		margin: 0 auto;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #666666;
		text-align: center;
		image{
			width: 500rpx;
			height: 500rpx;
			margin-top: 80rpx;
		}
	}

</style>
